本次使用 vite 來進行 PrimeVue 的說明，安裝步驟如下：

1. 安裝 vite：

   npm create vite@latest

2. 安裝 primeVue ：使用 npm install primevue ，目前預設以第四版為主要安裝版本。
3. 主題樣式：有分 styled Mode 及 Unstyled Mode 兩種，載入說明如下：

styled Mode

1. PrimeVue 提供的主題安裝：npm install @primevue/themes
2. 在 main.js 設定 primeVue 引入及主題設定

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';

const app = createApp(App);
app.use(PrimeVue, {
    theme: {
        preset: Aura
    }
});

3. 在 App.vue 中引入元件

<template>
  <main>
    <Button label="Submit" />
  </main>
</template>

4. 載入成功

Unstyled Mode

若要改採用 Unstyled Mode，則在 main.js 中加入設定 unstyled 為 true。

import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);

app.use(PrimeVue, {
    unstyled: true
});

如此，在元件載入時便不會吃到 PrimeVue 提供的樣式，需透過其他 CSS library 輔助或自行撰寫樣式。

或是自行撰寫 CSS 樣式，以下範例為加上按鈕背景色及按鈕文字顏色。

<template>
  <main>
    <Button label="Submit" class="bg-red text-white" />
  </main>
</template>

<style lang="scss">
.bg-red {
  background: #ff0000;
}

.text-white {
  color: #ffffff;
}
</style>

接下來會針對兩種模式有更進一步說明~

參考連結：

1. https://primevue.org/vite